Skip to content

feat: implement dynamic navbar toggle and logout redirect flow#564

Merged
mehul-m-prajapati merged 3 commits into
GitMetricsLab:mainfrom
Tannuu18:feat/navbar-logout-fix
May 31, 2026
Merged

feat: implement dynamic navbar toggle and logout redirect flow#564
mehul-m-prajapati merged 3 commits into
GitMetricsLab:mainfrom
Tannuu18:feat/navbar-logout-fix

Conversation

@Tannuu18
Copy link
Copy Markdown
Contributor

@Tannuu18 Tannuu18 commented May 27, 2026

Related Issue

Description

Fixed the navbar auth flow so it reflects the real session state. After login, the navbar now hides [Login] and [Signup], shows Logout, and clears the session correctly on logout.

How Has This Been Tested?

Ran the focused navbar test suite: npm test -- --run src/components/test/Navbar.test.tsx
Verified the auth-related JSX and session flow in the updated navbar, login page, and backend logout route
Confirmed logout redirects to the login page after clearing the session

Screenshots (if applicable)

image image

Type of Change

  • Bug fix
  • New feature
  • Code style update
  • Breaking change
  • Documentation update

Summary by CodeRabbit

Release Notes

  • New Features

    • Added session status endpoint for checking authentication
    • Implemented authentication context system for managing user state
    • Navbar now dynamically displays Login/Signup or Logout based on authentication status
  • Bug Fixes

    • Improved logout handling with proper session cleanup
    • Enhanced error handling for session management
  • Tests

    • Updated authentication-related tests for new authentication workflows

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 27, 2026

Deploy Preview for github-spy failed.

Name Link
🔨 Latest commit 7249d1c
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a1c0b9a02447300074ae017

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thank you @Tannuu18 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 27, 2026

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 51 minutes and 52 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fd0eaac3-f3ac-4bb3-93d5-26edb11c9938

📥 Commits

Reviewing files that changed from the base of the PR and between dc4c88d and 7249d1c.

📒 Files selected for processing (3)
  • backend/routes/auth.js
  • src/components/Navbar.tsx
  • src/pages/Login/Login.tsx
📝 Walkthrough

Walkthrough

PR adds centralized authentication state management via React Context, backend session normalization, and auth API endpoints. The navbar now conditionally displays Login/Signup links when unauthenticated or a Logout button when authenticated. Login form integrates with auth state, and logout properly clears the session and redirects.

Changes

Authentication State & Navbar Logout

Layer / File(s) Summary
Backend session deserialization and auth endpoints
backend/config/passportConfig.js, backend/routes/auth.js
Session user shape normalized to {id, username, email}; new GET /me endpoint returns auth status and user; GET /logout enhanced with error handling and session destruction before clearing connect.sid cookie.
AuthContext provider and app integration
src/context/AuthContext.tsx, src/main.tsx
New AuthContext manages user state, isLoading, and exposes refreshAuth() (fetches /api/auth/me), handleLoginSuccess(), and logout() (calls /api/auth/logout). AuthProvider wraps React tree between BrowserRouter and App.
Login form credential handling and auth state update
src/pages/Login/Login.tsx
Login request now sends credentials (withCredentials: true); on success, calls authContext.handleLoginSuccess() to update app-wide auth state instead of navigating directly.
Navbar auth-conditional UI and logout handler
src/components/Navbar.tsx
Navbar consumes AuthContext; renders Login/Signup links when unauthenticated, Logout button when authenticated (desktop and mobile); handleLogout() awaits context logout and redirects to /login with replace.
Navbar test setup and auth state assertions
src/components/__test__/Navbar.test.tsx
Test helper accepts isAuthenticated flag, provides mocked logout, and wraps with AuthContext. Tests verify Logout button presence when authenticated, absence of Login/Signup, mobile menu interactions via accessible labels, and logout invocation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

type:bug

Poem

🐰 A rabbit rejoices at the logout so fine,
The navbar now knows when a user's in line!
AuthContext flows through, credentials align,
Session and button together combine—
No more false "Login" when logged in, what design! 🎉

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main changes: dynamic navbar authentication toggle and logout redirect functionality.
Linked Issues check ✅ Passed All coding objectives from issue #110 are met: detect login state via AuthContext, dynamically show Logout/hide Login-Signup, and implement logout with session clearing and redirect.
Out of Scope Changes check ✅ Passed All changes directly support the navbar authentication flow requirements. Backend passport/auth updates, AuthContext creation, Navbar updates, and Login integration are all necessary and on-scope.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
backend/routes/auth.js (1)

50-65: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Use POST for logout to avoid CSRF-prone state changes.

Line 50 exposes logout as GET, which allows cross-site triggers of a state-changing action. This should be a non-GET endpoint (typically POST) and called accordingly from the client.

Proposed fix
- router.get("/logout", (req, res) => {
+ router.post("/logout", (req, res) => {
- await axios.get(`${backendUrl}/api/auth/logout`, {
-   withCredentials: true,
- });
+ await axios.post(
+   `${backendUrl}/api/auth/logout`,
+   undefined,
+   { withCredentials: true }
+ );
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@backend/routes/auth.js` around lines 50 - 65, The logout route is implemented
as a GET which causes a state-changing action to be CSRF-vulnerable; change the
route declaration from router.get("/logout", ...) to router.post("/logout", ...)
(the handler body using req.logout and req.session.destroy stays the same), and
update any client code/tests that call this endpoint to perform a POST request;
optionally ensure CSRF protection/middleware is applied to the POST route if
your app uses CSRF tokens.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/Navbar.tsx`:
- Around line 29-33: The handleLogout function awaits logout() without error
handling so a rejection will abort the UI flow; wrap the logout() call in
try/catch (or try/catch/finally) inside handleLogout so failures are caught and
logged, and ensure closeMenu() and navigate("/login", { replace: true }) still
run in the finally path (or after a successful logout) to keep the UI
consistent; reference the handleLogout function and the logout, closeMenu, and
navigate calls when making the change.
- Around line 18-19: The navbar is showing unauthenticated links while auth
state is still loading because only isAuthenticated from authContext is used;
update the Navbar to read the authContext's loading flag (e.g., isLoading)
alongside isAuthenticated and only render Login/Signup when isLoading is false
and isAuthenticated is false, and similarly avoid rendering authenticated-only
links (like the /me link, logout button) while isLoading is true; update all
locations using isAuthenticated (references: authContext, isAuthenticated,
logout, and the Navbar render branches around lines that control Login/Signup vs
/me/logout) to gate rendering on !isLoading before deciding which link set to
show.

---

Outside diff comments:
In `@backend/routes/auth.js`:
- Around line 50-65: The logout route is implemented as a GET which causes a
state-changing action to be CSRF-vulnerable; change the route declaration from
router.get("/logout", ...) to router.post("/logout", ...) (the handler body
using req.logout and req.session.destroy stays the same), and update any client
code/tests that call this endpoint to perform a POST request; optionally ensure
CSRF protection/middleware is applied to the POST route if your app uses CSRF
tokens.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c9a5abb7-4327-4974-96ce-cb467698aad9

📥 Commits

Reviewing files that changed from the base of the PR and between 4ae0ef6 and dc4c88d.

📒 Files selected for processing (7)
  • backend/config/passportConfig.js
  • backend/routes/auth.js
  • src/components/Navbar.tsx
  • src/components/__test__/Navbar.test.tsx
  • src/context/AuthContext.tsx
  • src/main.tsx
  • src/pages/Login/Login.tsx

Comment thread src/components/Navbar.tsx Outdated
Comment thread src/components/Navbar.tsx
@Tannuu18
Copy link
Copy Markdown
Contributor Author

heyy @mehul-m-prajapati can you please review and merge the issue??

@mehul-m-prajapati mehul-m-prajapati merged commit 62b5cb1 into GitMetricsLab:main May 31, 2026
2 of 6 checks passed
@github-actions
Copy link
Copy Markdown

🎉🎉 Thank you for your contribution! Your PR #564 has been merged! 🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🐛 Bug Report: Navbar Still Shows Login/Signup After Login — No Logout Option Available

2 participants